var timer = null,
    index = 0,
    pics = byId("banner").getElementsByTagName("div"),
    dots = byId("dots").getElementsByTagName("span"),
    size = pics.length,
    prev = byId("prev"),
    next = byId("next");


function addHandler(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, true);
    }
    else if (element.attachEvent) {
        element.attachEvent('on' + type, handler);
    }
    else {
        element['on' + type] = handler;
    }
}

function byId(id) {
    return document.getElementById(id);
}

// 清除定时器,停止自动播放
function stopAutoPlay() {
    if (timer) {
        clearInterval(timer);
    }
}

// 图片自动轮播
function startAutoPlay() {
    timer = setInterval(function () {
        index++;
        if (index >= size) {
            index = 0;
        }
        changeImg();
    }, 3000)
}

function changeImg() {
    for (var i = 0, len = dots.length; i < len; i++) {
        dots[i].className = "";
        pics[i].style.opacity = "0";
    }
    dots[index].className = "active";
    pics[index].style.opacity = "1";
}

function slideImg() {
    startAutoPlay();
    // var main = byId("main");
    var banner = byId("banner");


    addHandler(banner, "mouseover", stopAutoPlay);
    addHandler(banner, "mouseout", startAutoPlay);

    // 点击导航切换
    for (let i = 0, len = dots.length; i < len; i++) {
        dots[i].id = i;
        addHandler(dots[i], "click", function () {
            index = i;// this.id;
            changeImg();
        })
    }

    // 下一张
    addHandler(next, "click", function () {
        index++;
        if (index >= size) index = 0;
        changeImg();
    })

    // 上一张
    addHandler(prev, "click", function () {
        index--;
        if (index < 0) index = size - 1;
        changeImg();
    })
}

addHandler(window, "load", slideImg);